<template>
  <a-modal
    ref="modal"
    :title="`菜单${title}`"
    :width="640"
    destroyOnClose
    centered
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit('id')"
    @cancel="visible=!visible"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item label="菜单类型">
          <a-radio-group
            @change="typeChange"
            v-decorator="['type', {initialValue: model.type?model.type:type}]"
            buttonStyle="solid">
            <a-radio-button value="root">一级菜单</a-radio-button>
            <a-radio-button value="menu">子菜单</a-radio-button>
            <a-radio-button value="button">按钮/权限</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="主键ID" v-show="model.id" >
          <a-input v-decorator="['id', { initialValue: model.id }]" disabled />
        </a-form-item>
        <a-form-item :label="type==='button'?'按钮/权限':'菜单名称'">
          <a-input :placeholder="type==='button'?'请输入按钮/权限':'请输入菜单名称'" v-decorator="['title', {initialValue: model.title,rules: [{ required: true, message: '名称不能空！' }]}]"/>
        </a-form-item>
        <a-form-item label="权限码">
          <a-input placeholder="权限code 例如 user:add" v-decorator="['code', {initialValue: model.code,rules: [{ required: true, message: '菜单图标不能空！' }]}]"/>
        </a-form-item>
        <a-form-item label="组件名称" v-if="type!=='button'">
          <a-input placeholder="请输入组件名称" v-decorator="['name', {initialValue: model.name,rules: [{ required: true, message: '组件名不能空！' }]}]"/>
        </a-form-item>
        <a-form-item label="路由地址" v-if="type!=='button'">
          <a-input v-decorator="['path', {initialValue: model.path,rules: [{ required: true, message: '路由地址不能空！' }]}]"/>
        </a-form-item>
        <a-form-item label="重定向地址" v-if="type!=='button'">
          <a-input v-decorator="['redirect', {initialValue: model.redirect,rules: [{}]}]"/>
        </a-form-item>
        <a-form-item label="隐藏子菜单" v-if="type!=='button'">
          <a-input type="hidden" v-decorator="['hideChildren',{initialValue:model.hideChildren}]"/>
          <a-switch :defaultChecked="model.hideChildren === 0 && true || false" @change="onChangeHideChildren" />
        </a-form-item>
        <a-form-item label="菜单图标" v-if="type==='root'">
          <a-icon :type="showIcon"/>
          <icon-selector @change="handleIconChange" :value="model.icon"/>
        </a-form-item>
        <a-form-item label="上级菜单" v-if="type!=='root'">
          <TreeSelect
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            :treeData="menuList"
            treeCheckStrictly
            :getPopupContainer="(trigger)=>{return trigger.parentElement}"
            placeholder="请选择父菜单"
            v-decorator="['parentId', {initialValue: model.parentId,rules: [{ required: true, message: '父菜单不能空！' }]}]"
          >
          </TreeSelect>
        </a-form-item>
        <a-form-item label="排序">
          <a-input placeholder="请输入排序" v-decorator="['priority', {initialValue: model?model.priority:1}]"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import { TreeSelect } from 'ant-design-vue'
  import IconSelector from '@/components/IconSelector'
  import detailMixins from '@/utils/mixins/detailMixins'
  import { getList, getInfo, addInfo, editInfo } from '@/api/system/menu'
  export default {
    mixins: [detailMixins],
    components: {
      TreeSelect,
      IconSelector
    },
    data () {
      return {
        menuList: [],
        type: 'root',
        showIcon: ''
      }
    },
    created () {
      getList().then(res => {
        this.menuList = this.convertMenuList(res.data)
      })
    },
    methods: {
      info (record) {
        return getInfo(record)
      },
      filterForm (values) {
        if (values.parentId && values.parentId === this.model.id) {
          this.$message.error('上级菜单不能是当前菜单')
          return
        }
        if (values.type === 'root') {
          values.parentId = 0
        }
        if (values.type === 'button') {
          values.path = '#'
        }
        values.icon = this.showIcon
        return values
      },
      openAddBack (record) {
        this.model.parentId = record.id
        this.type = record.type
        this.showIcon = record.icon
        if (record.type === 'root') {
          this.type = 'menu'
        }
      },
      add (values) {
        return addInfo(values)
      },
      openEditBack () {
        this.type = this.model.type
        this.showIcon = this.model.icon
      },
      edit (values) {
        return editInfo(values)
      },
      handleIconChange (icon) {
        this.showIcon = icon
      },
      typeChange (data) {
        this.type = data.target.value
      },
      convertMenuList (menu) {
        if (!menu) {
          return []
        } else {
          const menuList = []
          menu.map(item => {
            const rs = {}
            rs.title = item.title
            rs.value = item.id
            rs.key = item.id
            if (item.children && item.children.length > 0) {
              rs.children = this.convertMenuList(item.children)
            }
            menuList.push(rs)
          })
          return menuList
        }
      },
      onChangeHideChildren (checked) {
        this.form.setFieldsValue({ 'hideChildren': checked ? 0 : 1 })
      }
    }
  }
</script>
<style scoped>
</style>
